<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">
        当前位置：首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>医院管理</el-breadcrumb-item>
      <el-breadcrumb-item>医生管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <div style="margin-bottom: 10px; font-size: 20px; font-weight: 900">
        <el-card>
          <div slot="header">
            <div class="green-reactangle"></div>
            <span>员工管理</span>
            <span style="float: right">
              <el-link
                style="color: #348a5b; font-size: 16px; font-weight: 600"
                :underline="false"
                @click="
                  $router.push({
                    path: '/hospital/AddStaff',
                    query: { id: hospital_id }
                  })
                "
              >
                <i class="el-icon-edit-outline"></i>
                新增员工
              </el-link>
            </span>
          </div>
          <!-- 列表区域 -->
          <el-table :data="list" border stripe>
            <el-table-column label="医院名称【ID】" min-width="220px">
              <template slot-scope="scope">
                {{ scope.row.hospital.title }}【{{ scope.row.hospital_id }}】
              </template>
            </el-table-column>
            <el-table-column label="员工姓名【ID】" min-width="120px">
              <template slot-scope="scope">
                {{ scope.row.nick_name }}【{{ scope.row.id }}】
              </template>
            </el-table-column>
            <el-table-column
              label="账号"
              min-width="120px"
              prop="mobile"
            ></el-table-column>
            <el-table-column
              label="用户类型"
              min-width="100px"
              prop="userType"
            ></el-table-column>
            <el-table-column label="头像" min-width="60px" prop="head">
              <template slot-scope="scope">
                <el-image :src="scope.row.head"></el-image>
              </template>
            </el-table-column>
            <el-table-column
              label="账号类型"
              min-width="80px"
              prop="gradeName"
            ></el-table-column>
            <!-- <el-table-column
              label="权限"
              min-width="140px"
              prop="leading_phone"
            >
              <template slot-scope="scope">
                <span v-show="scope.row.grade == '2'">-</span>
                <span v-show="scope.row.grade == '10'"
                  >核销、我的订单、药品管理、服务项目、团队管理、账户余额、结算账单、提现、银行卡、合作协议、设置、联系客服</span
                >
                <span v-show="scope.row.grade == '8'"
                  >抢单、咨询、核销、我的订单、药品管理、我的待办、推广商品、设置、联系客服</span
                >
              </template>
            </el-table-column> -->
            <el-table-column label="状态" min-width="80px" prop="status">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 1">正常</span>
                <span v-else-if="scope.row.status == 0">禁用</span>
                <span v-else style="color: red">状态异常</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="120px">
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  @click="
                    $router.push({
                      path: '/hospital/EditStaff',
                      query: { id: scope.row.id }
                    })
                  "
                >
                  编辑
                </el-link>
                &nbsp;
                <el-link
                  type="primary"
                  @click="onOffStatus(scope.row.id, 0)"
                  v-if="scope.row.status == 1"
                  style="color: red"
                >
                  禁用
                </el-link>
                <el-link
                  type="primary"
                  @click="onOffStatus(scope.row.id, 1)"
                  v-if="scope.row.status == 0"
                >
                  启用
                </el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      hospital_id: ''
    }
  },
  created() {
    this.hospital_id = this.$route.query.id
    this.getListData()
  },
  methods: {
    // 表格数据
    async getListData() {
      // 返回数据重命名为res
      const { data: res } = await this.$http.post(
        '/admin/Hospital/hospitalUser',
        { id: this.$route.query.id }
      )
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.list = res.data
    },
    async onOffStatus(staff_id, status) {
      console.log(staff_id)
      console.log(status)
      const { data: res } = await this.$http.post('admin/hospital/onOffStaff', {
        staff_id: staff_id,
        status: status
      })
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.$message.success(res.meta.msg)
      this.getListData()
    }
  }
}
</script>
